<template>
	<view class="page">
		<cu-custom bgColor="bg-white">
			<!-- <block slot="content"><text class="text-df">{{shop_name}}</text></block> -->
			<block slot="content">
				<view class=" flex-sub title_line_2 " style="height: 40px;">{{shop_name}}</view>
			</block>
		</cu-custom>
		<view class="">
			<view style="height:100rpx"><SearchBar @tap="search()"></SearchBar></view>
			<scroll-view scroll-y="true">
				<swiper class="card-swiper bg-white square-dot" :indicator-dots="true" :circular="true"
					 :autoplay="true" interval="3000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
					 indicator-active-color="#0081ff">
					<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''" @tap="handleImage(item)">
						<view class="swiper-item">
							<image :src="item.pic_url" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="bg-white padding">
					<!-- 关于店铺 -->
					<view class="cu-list" v-for="(item,index) in shopAboutList" :key="index" @tap="handleImage(item)">
						<view class="cu-item">
							<!-- <view class="bg-img flex align-center" :style="'background-image: url('+ item.pic_url+');'">
							</view> -->
							<image :src="item.pic_url" mode="widthFix" style="width: 100%;"></image>
						</view>
					</view>
					<!-- 店铺系列 -->
					<view class="cu-list " v-for="(item,index) in classifyList" :key="index" @tap="handleImage(item)">
						<view class="cu-item radius20">
							<!-- <view class="bg-img flex align-center" :style="'background-image: url('+ item.pic_url+');'">
							</view> -->
							<!-- <image :src="item.pic_url" mode="widthFix" style="width: 100%;"></image> -->
							 <view class="image">
							 	<image :src="item.pic_url" mode="widthFix" style="width: 100%;"></image>
							 	<!-- <view class="classifyList_tag">{{checkTags(item.operation_param)}}</view> -->
							 </view>
						</view>
					</view>
				</view>
				<!-- <official-account>关注公众号</official-account> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import SearchBar from '@/components/search.vue'
	import * as Foundation from '@/utils/Foundation.js'
	import * as Home_API from '@/api/home.js' 
	import * as Main_API from '@/api/main/home.js' 
	import * as RegExp from '@/utils/RegExp.js' 
	import {filterUrlParam} from '@/utils/Foundation.js'
	export default {
		components:{
			SearchBar
		},
		data() {
			return {
				shop_name:uni.getStorageSync('shop').shop_name,
				shop_id:uni.getStorageSync('shop').shop_id || 55,
				cardCur: 0,
				// list:[{id:2},{id:3}],
				swiperList:[],
				shopAboutList:[],
				classifyList:[],
				menuList: [{tag_name:'综合'}]
			};
		},
		onLoad(e) {
			//  菊花码反参解析shop_id
			if (e.scene) {
				console.log(e)
				let query = filterUrlParam(decodeURIComponent(e.scene))
				console.log('1111',query)
				if(query.shopId){
					this.shop_id = query.shopId
				}
			} 
			if(e.sharePhone){
				uni.removeStorage('referrer')
				uni.setStorageSync('referrer',{'phone':e.sharePhone})
			}
			// 入口跳转
			if(e.shop_id){
				// console.log(this.shop_id)
				this.shop_id = e.shop_id
				// this.getShopInfo(e.shop_id)
			}
			// else{
			// 	this.shop_id = uni.getStorageSync('shop').shop_id || 55
			// 	this.getShopInfo(this.shop_id)
			// }
			try {
			  const res = uni.getSystemInfoSync()
			   uni.setStorageSync('UUID',res.model+res.system+res.version);
			} catch (e) {
			  uni.setStorageSync('uuid',Foundation.randomString(11));
			}
		},
		onShow() {
			// this.shop_id = uni.getStorageSync('shop').shop_id || 55
			// console.log('home shop_id',this.shop_id)
			this.getShopInfo(this.shop_id)
			this.GET_Swiper()
			this.GET_MenuList()
		},
		watch:{
			shop_name(newVal){
				this.shop_name = newVal
			}
		},
		onPullDownRefresh() {
			setTimeout(()=> {
				uni.stopPullDownRefresh()
				this.GET_MenuList()
				this.GET_Swiper()
			}, 200);
		},
		methods:{
			onShareAppMessage() {
				let base_path = '/pages/home/home'
				let page_path = '/pages/home/home'
				let mobile = uni.getStorageSync('userInfo').mobile
				let user = uni.getStorageSync('userInfo').nickname
				let shop_name = uni.getStorageSync('shop').shop_name
				let shop_id = uni.getStorageSync('shop').shop_id
				let title = ''
				let path = ''
				if(mobile && shop_id){
					title = user + '分享的'+shop_name
					path = page_path+'?shop_id='+shop_id+'&sharePhone='+mobile
				}else if(shop_id){
					title = shop_name
					path =  page_path+'?shop_id='+shop_id
				}
			    return {
					title: title,
					path: path
			    }
			},	
			search(){
				uni.navigateTo({
					url:'../commons/search'
				})
			},
			getShopInfo(shop_id){
				Main_API.getShopInfo(shop_id).then(async res=>{
					if(res.shop_id){
						this.shop_id = res.shop_id
						this.shop_name = res.shop_name
						await uni.setStorageSync('shop',res)
					}
				}).catch(()=>{
					uni.showLoading({
						title:'店铺已不存在，请换一个试试'
					})
				})
			},
			GET_MenuList(){
				let menuList = uni.getStorageSync('menuList')
				if(!menuList){
					let shop_id = uni.getStorageSync('shop').shop_id
					let params = {
						sellerId :shop_id
					}
					if(shop_id){
						Home_API.getLabel(params).then(res =>{
							if(res){
								this.menuList = [{tag_name:'全部'}]
								res.map(item =>{
									this.menuList.push(item)
								})
								uni.setStorageSync('menuList',this.menuList)
							}
						})
					}
				}
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			GET_Swiper(){
				//位置: TOP:轮播图/MIDDLE:关于店铺/BOTTOM:广告
				Home_API.HomeSwiper(this.shop_id,"TOP").then(res =>{
					let swiperList = []
					if(res.length){
						this.swiperList = res
					}
				})
				Home_API.HomeSwiper(this.shop_id,"MIDDLE").then(res =>{
					if(res.length){
						this.shopAboutList = res
					}
				})
				Home_API.HomeSwiper(this.shop_id,"BOTTOM").then(res =>{
					if(res.length){
						this.classifyList = res
					}
				})
			},
			handleImage(item){
				if(item.operation_type === "GOODS"){
					uni.navigateTo({
						url:"/pages/goods/goods?goods_id="+item.operation_param
					})
				}else if(item.operation_type === "URL"){
					uni.navigateTo({
						url:item.operation_param
					})
				}else if(item.operation_type === "TAG"){
					uni.reLaunch({
						url:'../mall/mall?id='+item.id+'&operation_param='+item.operation_param
					})
				}else if(item.operation_type === "ACTIVITY"){
					if(item.operation_param){
						uni.navigateTo({
							url:'/pages/activity/tour/activityDetail?active_id='+item.operation_param
						})
					}else{
						uni.navigateTo({
							url:"/pages/activity/tour/zone"
						})
					}
				}	
			},
		}
	}
	function gup(name, url) {
	  if (!url) url = location.href;
	  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
	  var regexS = "[\\?&]" + name + "=([^&#]*)";
	  var regex = new RegExp(regexS);
	  var results = regex.exec(url);
	  return results == null ? null : results[1];
	}
</script>

<style lang="scss">
	.classifyList_tag{
		position: absolute; 
		top: 0; 
		left: 20rpx;
		width:180rpx;
		height:50rpx;
		background:rgba(0,0,2,0.4);
		border-radius:0px 0px 10rpx 10rpx;
		color: #fff;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 50rpx;
		text-align: center;
	}
	.title_line_2{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	/deep/.cu-custom .cu-bar .content {
		width: calc(100% - 200rpx);
	}
	.cu-bar .content {
		right: 200rpx;
		text-align: left;
		padding: 0 0 0 40rpx;
		margin-right: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>
